<template>
  <div class="quanbu">
    <van-nav-bar left-text="OMINI官方旗舰店"
                 id="tit" />
    <van-row>
      <div class='box8'>
        <van-col span="8"
                 class='zi'>关注数量 2333</van-col>
        <van-col span="8"
                 class='zi'>信用值 100</van-col>
      </div>
    </van-row>
    <div>
      <van-tabs v-model="active">
        <van-search v-model="value"
                    placeholder="搜索" />
        <van-tab title="首页">
        </van-tab>

        <van-tab title="商品">
          <div class='daohang'>

          </div>
          <van-sticky class='buzhidao'>
            <van-button type="primary">
              <van-dropdown-menu>
                <van-dropdown-item v-model="value1"
                                   :options="option1" />
                <van-dropdown-item v-model="value2"
                                   :options="option2" />
                <van-dropdown-item v-model="value3"
                                   :options="option3" />
              </van-dropdown-menu>
            </van-button>

          </van-sticky>
          <div class='liebiao'>
            <van-list v-model="loading"
                      :finished="isEnd"
                      finished-text="没有更多了"
                      @load="onLoad">
              <van-card class='box11'
                        v-for="item in products"
                        :key="item.id"
                        :price="item.price | money"
                        :origin-price="item.originPrice | money"
                        :thumb="item.image"
                        :title="item.title"
                        @click="jumpToDetail(item.id)">
              </van-card>
            </van-list>
          </div>
        </van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
/deep/.van-nav-bar__text {
  color: #333333;
  font-size: 16px;
}
/deep/.zi {
  font-size: 14px;
  padding-right: 10px;
  color: #b7a28e;
}
/deep/.van-search {
  width: 200px;
  border-radius: 10px;
}
/deep/.van-search__content {
  border-radius: 22px;
}
/deep/.van-tab--active {
  width: 100px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 320px;
  text-align: center;
  background-color: #39a9ed;
}
/deep/.van-card__desc {
  margin-top: 32px;
}

/deep/.but1 {
  position: relative;
  margin-top: 80px;
  border-radius: 100px;
  width: 200px;
  border: #d3b396;
  color: #d3b396;
}
/deep/.van-button--plain.van-button--info {
  color: #d3b396;
}
/deep/.box2 {
  width: 1800px;
  height: 250px;
  display: flex;
}
/deep/.van-nav-bar__content {
  height: 27px;
}
/deep/.box4 {
  // margin-right: 20px;
  margin-left: 30px;
  width: 50px;
}
/deep/.box5 {
  margin-right: 20px;
  margin-left: 80px;
  width: 120px;
  margin-right: 20px;
  margin-left: 80px;
  width: 100px;
}
// /deep/.box5 {
//   margin-right: 20px;
//   margin-left: 240px;
//   width: 100px;
// }
/deep/.box6 {
  height: 3000px;
  width: 1800px;

  background: #c1ab96;
}
.box8 {
  background: #eae9e5;
}
/deep/.van-tab--active {
  background: #eae9e5;
}
/deep/.van-tab {
  background: #eae9e5;
  width: 300px;
}
.van-grid {
  display: flex;
  margin-left: 20px;
  margin-bottom: 20px;
}
.box5 {
  display: flex;
}
/deep/.van-card {
  height: 150px;
  background: #ffffff;
  padding: 30px 22px;
  width: 330px;
  margin: 0 auto;
  border-radius: 40px;
  padding-top: 15px;
}
/deep/.van-button--primary {
  background: none;
  border: 1px solid red;
  width: 400px;
}
/deep/.van-dropdown-menu__bar {
  width: 400px;
  border: #333333;
  border-radius: 5px;
}
/deep/.van-dropdown-menu__item {
  border-radius: 5px;
}
.liebiao {
  // border: 1px solid red;
  width: 750px;
  height: 2000px;
  background: #b7a28e;
  padding-top: 30px;
}
/deep/.van-nav-bar__content {
  height: 55px;
  background: #b7a28e;
}
/deep/.box8{
  background: #b7a28e;

}
.buzhidao{
  margin-bottom: 20px;
}
</style>

<script>
import { getHots } from '@/api/quanbu'
export default {
  name: 'quanbu',
  data() {
    return {
      value1: 0,
      value2: 'a',
      value3: '4',
      option1: [
        { text: '综合', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '销量', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      option3: [
        { text: '价格', value: '4' },
        { text: '好评排序', value: '5' },
        { text: '销量排序', value: '6' },
      ],
      products: [], // 推荐商品
      isEnd: false, // 是否所有推荐商品已查完
      nextIndex: 0, // 下一页推荐商品查询起始索引
      loading: true, // 商品列表中是否正在加载列表数据
      active: 2,
    }
  },

  async created() { // 实例创建后，立即发送网络请求
    try {
      const [
        { list: products, isEnd, nextIndex },
      ] = await Promise.all([
        getHots(),
      ])
      this.products = products.slice(0, 5)
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    } catch (error) {
      console.error('有错误：', error)
    }
  },
  methods: {
    /**
     * 触底加载更多商品
     */
    async onLoad() {
      // 异步更新数据
      const { list, nextIndex, isEnd } = await getHots(this.nextIndex)
      this.products = [
        ...this.products, // 浅拷贝，将原有 products 数组中的元素复制到新数组中
        ...list,
      ]
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    },
  },
}
</script>
